<!DOCTYPE html>
<!--
Copyright 2012 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- -->
    <script src="lib/loader.js"></script>
    <script src="lib/Component.js"></script>
    <!-- -->
    <style>
      div, g-A, g-B, g-C {
        display: block;
        border: 1px dotted red;
        margin: 8px;
        padding: 8px;
      }
    </style>
    <script>
      change = function() {
        Component.register("g-A", ["Base", "A"]);
        Component.register("g-B", ["Base", "B"]);
        Component.register("g-C", ["Cbb", "Cb", "C"]);
        Component.register("g-D", ["Dbbb", "Dbb", "Db", "D"]);
        Component.register("g-E", ["Eb", "E"]);
        Component.register("g-F", ["F"]);
        //
        Component.upgradeAll();
        //
        B = c$[1];
        B.webkitShadowRoot.appendChild(document.createTextNode(" Appended to B's Base "));
        B.appendChild(document.createTextNode(" Appended to B "));
        //
        A = c$[0];
      }
    </script>
  </head>
  <body onload="change()">
      <g-A><span>Where am I?</span></g-A>

      <template id="A">[A->]<g-C><g-B><content></content><content></content></g-B></g-C>
        <g-B><content></content></g-B><g-C><g-B><shadow></shadow></g-B></g-C>[<-A]
      </template>

      <template id="B">[B->][<content></content>]<shadow></shadow>[<-B]</template>

      <template id="Base">[Base->]<content></content>[<-Base]</template>

      <template id="C">[C->]<shadow></shadow>[<-C]</template>
      <template id="Cb"><span>[Cb->]<shadow></shadow>[<-Cb]</span></template>
      <template id="Cbb">[Cbb->]<g-D><content></content></g-D>[<-Cbb]</template>


      <template id="D">[D->]<shadow></shadow>[<-D]</template>
      <template id="Db">[Db->]<g-E><shadow></shadow></g-E>[<-Db]</template>
      <template id="Dbb">[Dbb->]<g-E><shadow></shadow></g-E><shadow></shadow>[<-Dbb]</template>
      <template id="Dbbb">[Dbbb->]<g-E><content></content></g-E>[<-Dbbb]</template>

      <template id="E">[E->]<g-F><shadow></shadow></g-F>[<-E]</template>
      <template id="Eb">[Eb->]<g-F><content></content></g-F>[<-Eb]</template>

      <template id="F">[F->]<content></content>[<-F]</template>

      <hr/>

      Expected output (also, see console):

      <div>[A->]
        <div>[C->][Cb->][Cbb->][D->][Db->][E->][F->][Eb->][F->][Dbb->][E->][F->][Eb->][F->]
          [Dbbb->][E->][F->][Eb->][F->]
          <div>[B->]<span>Where Am I?</span>[Base->][<-Base][<-B]</div>
        [<-F][<-Eb][<-F][<-E][<-Dbbb][<-F][<-Eb][<-F][<-E][<-Dbb][<-F][<-Eb][<-F][<-E][<-Db][<-D]
          [<-Cbb][<-Cb][<-C]</div>
        <div>[B->][ Appended to B ][Base->][<-Base] Appended to B's Base [<-B]</div>
        <div>[C->][Cb->][Cbb->][D->][Db->][E->][F->][Eb->][F->][Dbb->][E->][F->][Eb->][F->]
          [Dbbb->][E->][F->][Eb->][F->]
          <div>[B->][[Base->][<-Base]][Base->][<-Base][<-B]</div>
          [<-F][<-Eb][<-F][<-E][<-Dbbb][<-F][<-Eb][<-F][<-E][<-Dbb][<-F][<-Eb][<-F][<-E][<-Db][<-D]
        [<-Cbb][<-Cb][<-C]</div>
      [<-A]</div>

</body>
</html>
